<template>
	<el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
		class="demo-ruleForm" :size="formSize" status-icon>
		<el-form-item label="业务名称" prop="BusinessName">
			<el-input v-model="ruleForm.BusinessName" />
		</el-form-item>
		<el-form-item label="业务描述" prop="BusinessDesc">
			<el-input v-model="ruleForm.BusinessDesc" />
		</el-form-item>	
	
		<el-form-item>
			<el-button type="primary" @click="submitForm(ruleFormRef)">
				保存
			</el-button>
			<el-button @click="resetForm(ruleFormRef)">重置</el-button>
		</el-form-item>
	</el-form>
</template>

<script setup lang="ts">
	
	import { reactive, ref, onMounted } from 'vue'
	import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
	import { ElNotification } from 'element-plus'
	
	import businApi from "../../api/businessInfoapi"
	const props = defineProps({
	    Id: {
			type:Number,
			required:true   //必填
		}
	});
	const emit = defineEmits(['onSave'])
	
	interface RuleForm {
	     BusinessName: string
	     BusinessDesc: string
	}
	
	const formSize = ref<ComponentSize>('default')
	const ruleFormRef = ref<FormInstance>()
	const ruleForm = ref<RuleForm>({
	        BusinessName: '',
	        BusinessDesc: '',
	
	})
	
	const parentMenu = ref<any>([])
	
	
	const getData = () => {
	    businApi.get(props.Id!).then(res => {
	        console.log("aaa=", res.data);
	        ruleForm.value = res.data
	    })
	}
	onMounted(() => {
	    getData();
})
	const submitForm = async (formEl: FormInstance | undefined) => {
	    if (!formEl) return
	    await formEl.validate((valid, fields) => {
	        if (valid) {
	            console.log("ruleForm.data", ruleForm.value)
	
	            businApi.put(props.Id,ruleForm.value).then(res => {
	                console.log("rws",res)
	                if (res.code == 1) {
	                    ElNotification({
	                        title: 'Success',
	                        message: '修改成功',
	                        type: 'success',
	                        duration: 800,
	                        onClose: () => {
	                            emit("onSave", true)
	                        }
	                    })
	                } else {
	                    ElNotification({
	                        title: 'Error',
	                        message: '失败',
	                        type: 'error',
	                        duration: 800,
	                    })
	                }
	            }).catch(err => {
	                ElNotification({
	                    title: 'Error',
	                    message: '失败',
	                    type: 'error',
	                    duration: 800,
	                })
	                console.log("err",err)
	            })
	        } else {
	            console.log('error submit!', fields)
	        }
	    })
	}
	
	const resetForm = (formEl: FormInstance | undefined) => {
	    if (!formEl) return
	    formEl.resetFields()
	}
	
	
</script>

<style>
</style>